vue
<template>
    <div class="header-wrap">
        <div class="header-box flex justify-between items-center h-full max-w-[1200px] mx-auto">
            <div class="flex justify-between w-full header-left">
                <img width="135" class="relative z-10 cursor-pointer savetrx-logo" src="/src/assets/savetrx-logo.svg" alt="savetrx-logo" />
                <nav aria-label="Site Nav" class="top-nav" style="top: 0px">
                    <ul class="nav-list">
                        <li v-for="(item, index) in headerList" :key="index" class="nav-item">
                            <span class="relative px-3 py-2 rounded-lg cursor-pointer whitespace-nowrap" @click="itemClick(item, index)">
                                {{ item.title }}
                            </span>
                        </li>
                        <li class="flex justify-center pl-3 nav-item">
                            <div class="flex items-center cursor-pointer in-btn">
                                <img width="20" class="mr-2" src="/src/assets/lan.svg" alt="lan" />
                                <span class="flex-shrink-0">English</span>
                            </div>
                        </li>
                        <li class="login-btn">
                            <a class="login-link" href="https://api.savetrx.io/#/login" target="_blank">登录</a>
                        </li>
                    </ul>
                    <div class="nav-bg"></div>
                </nav>
            </div>
            <div class="relative z-10 flex items-center md:hidden">
                <div class="hamburger">
                    <div class="hamburger-line"></div>
                    <div class="hamburger-line"></div>
                    <div class="hamburger-line"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Header",
    data() {
        return {
            headerList: [
                { title: '主页', ref: 'home' },
                { title: '兑换能量', ref: 'energyExchange' },
                { title: '最新交易', ref: 'latestTransaction' },
                { title: '关于我们', ref: 'aboutUs' },
                { title: '常见问题', ref: 'faq' },
                { title: '联系我们', ref: 'support' },
            ],
        };
    },
    methods: {
        itemClick(item, index) {
            this.$emit('navigateTo', item.ref);
        },
    },
};
</script>

<style scoped>
/* 你的样式代码 */
</style>